$(function() {
  // select 元素
  var $selectorProvince = $("#province");
  var $selectorCity = $("#city");
  var $selectorDistrict = $("#district");

  // 地区的默认值，通过select的default-data获取
  var defaultProvince = $selectorProvince.attr('data-default');
  var defaultCity = $selectorCity.attr('data-default');
  var defaultDistrict = $selectorDistrict.attr('data-default');

  if (!defaultProvince) defaultProvince = currentProvince;
  if (!defaultCity) defaultCity = currentCity;

  // 初始化
  initSelector($selectorProvince, provinces);
  initSelector($selectorCity, getCities(defaultProvince));
  initSelector($selectorDistrict, getDistricts(defaultProvince, defaultCity));

  // 选择省份
  $selectorProvince.change(function() {
    currentProvince = $(this).val();
    initSelector($selectorCity, getCities(currentProvince));
    $selectorCity.trigger('change');
  })

  // 选择城市
  $selectorCity.change(function() {
    currentCity = $(this).val();
    initSelector($selectorDistrict, getDistricts(currentProvince, currentCity));
  })

  // 初始化选择框 其中 data 表示包含所有选择项的数组
  function initSelector(selectObj, data) {
    // 空的数据直接隐藏select元素
    if (data == "") {
      selectObj.hide();
      selectObj.html("");
    } else {
      selectObj.show();
    }

    var str = "";
    var selected = selectObj.attr('data-default');
    for (var i = 0; i < data.length; i++) {
      var _data = data[i];
      if (_data === selected) {
        str += '<option selected="selected" value="' + _data + '">' + _data + '</option>';
      } else {
        str += '<option value="' + _data + '">' + _data + '</option>';
      }
    }
    selectObj.html(str);
  }
})
